<div class="devui-form-control-container">
  <ng-content></ng-content>
  <span *ngIf="suffixTemplate" class="devui-form-item-suffix suffix">
    <ng-template [ngTemplateOutlet]="suffixTemplate"></ng-template>
  </span>

  <span [attr.class]="'devui-form-item-icon devui-form-item-icon-' + feedbackStatus" *ngIf="feedbackStatus">
    <svg *ngIf="feedbackStatus === 'error'" width="14px" height="14px" viewBox="0 0 16 16">
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <circle cx="8" cy="8" r="8"></circle>
        <polygon
          points="8.07106781 6.65685425 10.8994949 3.82842712 12.3137085 5.24264069 9.48528137 8.07106781 12.3137085 10.8994949 10.8994949 12.3137085 8.07106781 9.48528137 5.24264069 12.3137085 3.82842712 10.8994949 6.65685425 8.07106781 3.82842712 5.24264069 5.24264069 3.82842712"
        ></polygon>
      </g>
    </svg>
    <svg *ngIf="feedbackStatus === 'success'" width="14px" height="14px" viewBox="0 0 16 16">
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <circle cx="8" cy="8" r="8"></circle>
        <polygon
          points="6.53553391 9.77817459 12.1923882 4.12132034 13.6066017 5.53553391 6.53553391 12.6066017 3 9.07106781 4.41421356 7.65685425 6.53553391 9.77817459"
        ></polygon>
      </g>
    </svg>
    <svg *ngIf="feedbackStatus === 'pending'" width="14px" height="14px" viewBox="0 0 16 16">
      <g id="loading" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path
          d="M8,0 C12.4,0 16,3.6 16,8 C16,12.4 12.4,16 8,16 C3.6,16 0,12.4 0,8 C0,3.6 3.6,0 8,0 Z M8,1 C4.15,1 1,4.15 1,8 C1,11.85 4.15,15 8,15 C11.85,15 15,11.85 15,8 C15,4.15 11.85,1 8,1 Z"
          fill-rule="nonzero"
        ></path>
        <path d="M8,0 C12.4,0 16,3.6 16,8 L15,8 C15,4.15 11.85,1 8,1 L8,0 Z" fill-rule="nonzero"></path>
      </g>
    </svg>
  </span>
</div>
<div class="devui-form-control-inner-content">
  <div class="devui-form-message" *ngIf="errorMessage">
    <span class="devui-form-message-text">
      <span>
        {{ errorMessage }}
      </span>
    </span>
  </div>
  <div *ngIf="extraInfo" class="devui-form-control-extra-info">
    <ng-template [ngTemplateOutlet]="extraInfoTemplate || defaultTemplate"> </ng-template>
    <ng-template #defaultTemplate>
      {{ extraInfo }}
    </ng-template>
  </div>
</div>
